@import (reference) "../../theme/style";

@preview-header: 45px;
.pl-preview {
  .fixed-full;
  z-index: @preview-zindex;
  background-color: black;
  img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0px);
  }
  &-header {
    .flex-right;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: @preview-header;
    color: white;
  }
  &-image {
    width: 100%;
    height: 100%;
    position: relative;
  }
  &-footer {
    .flex-between;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 10px;
    height: @preview-header;
    z-index: @preview-zindex + 10;
    color: white;
  }
  &-delete {
    .flex-center;
    width: 36px;
    height: 36px;
    margin-right: 9px;
    margin-bottom: 9px;
    position: relative;
    .opacity-background(black, 0.3);
  }
}